import { useEffect, useState } from 'react'
import 'antd/dist/antd.css'
import {Spin,Tabs} from 'antd'
import TodoInput from './todo-input'
import {useRequest} from './hooks'

// 代码风格
// 1. ; 要么全加要么全不加
// 2. 定义常量 action type 提高代码可读性
// 3. 空行 断点好读
const TAB_ALL ='all';
const TAB_FINISHED ='finished';
const TAB_UNFINISHED ='unfinished';

const tabMap={
  [TAB_ALL]:'全部',
  [TAB_FINISHED]:'已完成',
  [TAB_UNFINISHED]:'待完成',
}

function App() {
  const [activeTab, setActiveTab] = useState(TAB_ALL);
  const [placeholder, setPlaceholder] = useState('请输入要同步的任务');
  const {
    loading:listLoading,
    data:{
      results:todos=[]
    }
  }=useRequest(()=>{},[activeTab]);  // url 请求 自定义 hooks
  const loading=listLoading;

  const setquery=()=>{

  }

  useEffect(()=>{
    // componentDidMount 创建执行
    // shouldComponentUpdate 更新执行
    // willComponentUnMount 退出执行

  },[])

  return (
    <>
      {/* 容器组件 */}
      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <Tabs.TabPane tab={tabMap[TAB_ALL]} key={TAB_ALL}></Tabs.TabPane>
        <Tabs.TabPane tab={tabMap[TAB_FINISHED]} key={TAB_FINISHED}></Tabs.TabPane>
        <Tabs.TabPane tab={tabMap[TAB_UNFINISHED]} key={TAB_UNFINISHED}></Tabs.TabPane>
      </Tabs>
      <div className="app-wrap">
        <h1 className="app-title"></h1>
        {/* 搜索，取数据 */}
        <TodoInput placeholder={placeholder} onSetQuery={setquery}></TodoInput>
        <Spin spinning={loading} tip='稍等片刻'>
          {/* <TodoList /> */}
        </Spin>
      </div>
    </>
  )
}

export default App
